
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>[商家]我的椰子屋商品展示</title>
    <style>

    body {
    background-image: url("背景00.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    }

    .product-container {
    display: flex;
    flex-wrap: wrap;
        /*让子元素能够自动换行*/
    justify-content: flex-start;
    /*background: dodgerblue;*/
    }

    .product-item {
    flex-basis: 25%; /* 调整为所需的宽度 */
    text-align: center;
    box-sizing: border-box;
    padding: 10px;
    /*background: white;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    }

    .product-item img {
    width: 200px;
    height: 200px;
    }

    .product-item p {
    margin: 5px 0;
    }
    </style>


</head>
<body>
<h1 style="color: white;">我的椰子屋商品展示</h1>

<div class="product-container">
<%--<table>  --%>
<%--    <tr >--%>
    <c:forEach var="shop" items="${shops}">
        <div class= "product-item"  >
<%--            <td  class="product-item" >--%>
               <img src="${shop.url}" alt="商品图片" width="200" height="200">
                ${shop.product}
               ${shop.price}元
                <form action="/mavenPro000_war_exploded/Mmessage" method="post">
                <input type="submit" name="add" value="查看商品信息"
                       style="border-radius: 5%;border: none;align-content:center;opacity:0.8;background-color: saddlebrown;color: white;
                       font-size:16px;width: 150px;height: 25px"></form></div>
<%--            </td>--%>
<%--            </tr>--%>

    </c:forEach>
</div>
<%--</table>--%>

<%--</div >--%>
<br>
    <br>

<%
//    String pageStr = (String) request.getAttribute("page");
    int page1 = (int) request.getAttribute("page");%>
    <div  style="position: absolute ;top: 880px;left:  700px;
         font-size:30px;color: saddlebrown;
         background-color: #cccccc; border-radius: 5%;  opacity:0.7;">
    <a href="/mavenPro000_war_exploded/shows-hop?page=1">首页</a>
    <a href="/mavenPro000_war_exploded/shows-hop?page=<%=page1-1%>">上一页</a>
    <a href="/mavenPro000_war_exploded/shows-hop?page=<%=page1+1%>">下一页</a>
<%--    <a href="/keshe1_war_exploded/shows-hop?page=${totalPages}">末页</a>--%>
</div>
</body>
</html>